
/**
    header page
    lbj 2018.6.7
 */
<style lang="scss" scoped>
@import "../css/tools";
.header {
  min-width: 1230px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  background: rgba(250, 250, 250, 0);
  &.active {
    // background: $bgColor;
    .mylogo {
      background: url(../img/logo1.png) no-repeat;
    }
    a {
      color: #fff;
    }
  }
  nav {
    padding: 35px 7% 35px 10%;
    .mir {
      text-indent: -9999px;
    }
    .mylogo {
      display: block;
      width: 253px;
      height: 43px;
      background: url(../img/logo.png) no-repeat;
    }
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 25px;
      a {
        color: $fontColor;
        display: block;
        padding: 5px 15px;
        text-decoration: none;
        border-bottom: 3px solid transparent;
      }
      &.active {
        color: $fontActive;
        a {
          color: $fontActive;
          border-bottom: 3px solid $fontActive;
        }
      }
    }
  }
}
</style>

<template>
  <div class="header position-f" :class="{active: islogo}">
    <nav class="box-space">
      <a href="" class="mir mylogo">火尔赤</a>
      <ul class="flex-col">
        <li @click="cutNav(0)" :class="{active:nav[0]}">
          <a href="javascript:;">首页</a>
        </li>
        <li @click="cutNav(1)" :class="{active:nav[1]}">
          <a href="javascript:;">核心产品</a>
        </li>
        <li @click="cutNav(2)" :class="{active:nav[2]}">
          <a href="javascript:;">经济效益分析</a>
        </li>
        <li @click="cutNav(3)" :class="{active:nav[3]}">
          <a href="javascript:;">企业介绍</a>
        </li>
        <li @click="cutNav(4)" :class="{active:nav[4]}">
          <a href="javascript:;">联系我们</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: "header",
  data() {
    return {
      islogo: false,
      nav: [1, 0, 0, 0, 0],
      navIndex: 0
    };
  },
  watch: {
    indexStatus(i) {
      if(!this.navIndex){
        this.islogo = parseInt(i) ? true : false;
      }
    }
  },
  computed: {
    indexStatus() {
      console.log(this.$store.state.indexStatus);
      return this.$store.state.indexStatus;
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    cutNav(i) {
      if (i === this.navIndex) true;
      this.islogo = i === 0 || i === 1 ? false : true;
      this.nav = [0, 0, 0, 0, 0];
      this.nav[i] = 1;
      let url = {
        "0": "index",
        "1": "core",
        "2": "economic",
        "3": "introduce",
        "4": "contact"
      };
      this.navIndex = i;
      this.toRouter(url[i]);
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      if (this.islogo) {
        document.querySelector(".header").style.background =
          "rgba(48,48,48," + scrollTop / 600 + ")";
      } else {
        document.querySelector(".header").style.background =
          "rgba(255,255,255," + scrollTop / 600 + ")";
      }
    },
    getIndex(i) {
      i ? (this.islogo = true) : false;
    }
  }
};
</script>
